.rtv-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: white;

    .room-subject {
        border-radius: 2px;

        dt {
            font-size: 13px;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        &_category {
            padding: 0px 4px;
            border-radius: 4px;
            margin-right: 8px;
            font-size: 12px;
            display: inline-block;
            line-height: 20px;
            background: $f-aid-02;
            border: 1px solid $f-theme-01;
        }

        dd.other-info {
            margin: 0;
            line-height: 18px;
            color: $f-text-07;
            text-overflow: ellipsis;
            overflow: hidden;
            padding-top: 3px;
        }
    }

    .text-center {
        align-items: center;
        justify-content: center;
    }

    .toolbar {
        height: 50px;
        width: 100%;
        border-bottom: 1px solid $f-neutral-07;
        display: flex;
        align-items: center;
        padding-left: 20px;

        button {

            &:focus,
            &:active {
                outline: none !important;
            }
        }

        .view-type {
            width: 131px;
            height: 32px;
            line-height: 32px;
            background: $f-aid-04;
            border-radius: 32px;
            display: flex;
            align-items: center;

            .btn-day,
            .btn-week {
                width: 64px;
                height: 30px;
                border-radius: 32px;
                background: none;
                border: 0;
                font-weight: 400;
                cursor: pointer;
            }

            .btn-active {
                background: rgba(255, 255, 255, 0.75);
                box-shadow: 0px 4px 18px 0px rgba(2, 75, 193, 0.2);
                color: $f-theme-03;
                cursor: default;
            }
        }

        .line {
            height: 20px;
            width: 20px;
            display: inline-block;
            border-right: 1px solid $f-neutral-06;
            margin-right: 20px;
        }

        .btns {
            display: flex;
            width: 112px;
            margin-right: 20px;

            button {
                height: 26px;
                background: #FFFFFF;
                border: 1px solid rgba(232, 235, 242, 1);
                box-shadow: 0px 2px 6px 0px rgba(31, 35, 41, 0.06);
                border-radius: 6px;
                outline: none;
                cursor: pointer;
            }

            .btn-today {
                width: 50px;
                margin-right: 5px;
            }

            .btn-group {
                width: 53px;
                flex-grow: 1;
                display: flex;

                button {
                    width: 26px;

                    i.f-icon {
                        position: relative;
                        left: -2px;
                        top: 2px;
                    }
                }
            }

            .btn-prev {
                border-radius: 6px 0 0 6px;
            }

            .btn-next {
                border-radius: 0 6px 6px 0;
            }
        }
    }

    .main {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .fixed-left {
            position: sticky !important;
            left: 0px;
            z-index: 9;
            flex: none !important;
            width: 300px;
        }

        .roomname {
            align-items: center;
            justify-content: start;
            background-color: white !important;
        }

        .header {
            height: 40px;
            overflow: hidden;
            border-bottom: 1px solid #E6E9F0;

            &-row {
                display: flex;
                flex-direction: row;
                width: 2700px;
                height: 100%;
            }

            &-cell {
                height: 100%;
                display: flex;
                border-right: 1px solid $f-neutral-06;
                border-bottom: 1px solid $f-neutral-06;

                &>span.time {
                    margin-left: -20px;
                    font-size: 14px;
                    color: $f-text-04;
                    font-weight: 500;
                }
            }
        }

        .time-cell {
            width: 100px;
            align-items: center;
        }


        .body {
            flex-grow: 1;
            height: 100%;

            .room-row {
                min-height: 62px;
                display: flex;
                flex-direction: row;
                width: 2700px;
            }

            .room-cell {
                height: 100%;
                display: flex;
                position: relative;
                border-right: 1px solid $f-neutral-06;
                border-bottom: 1px solid $f-neutral-06;

                .item-content {
                    width: 100px;
                    position: absolute;
                    left: 0px;
                    flex-wrap: nowrap;
                    display: flex;
                    flex-direction: column;
                    line-height: 20px;
                    justify-content: center;
                    z-index: 1;
                    word-break: normal;
                    white-space: nowrap;
                    overflow: hidden;
                    height: calc(100% - 4px);
                    cursor: pointer;

                    &:hover {
                        box-shadow: 2px 2px 7px #bebebe;
                    }

                    .item-content-wrap {
                        border-radius: 6px;
                        background: $f-aid-02;
                        width: 100%;
                        height: 100%;

                        &.gray {
                            background-color: #f0f0f0;

                            .room-subject_category {
                                border: 1px solid #cccccc;
                                background: #F2F3F5;
                                color: #878d99;
                            }
                        }

                        &.blue {
                            background: #dae9ff;

                            .room-subject_category {
                                border: 1px solid #99bbff;
                                background: #99bbff;
                                color: #ffffff;
                            }
                        }

                        &.orange {
                            background: #ffedda;

                            .room-subject_category {
                                border: 1px solid #ff772e;
                                background: #ff772e;
                                color: #fff5ea;
                            }
                        }

                        &.mintgreen {
                            background: #daffe0;

                            .room-subject_category {
                                border: 1px solid #42fc57;
                                background: #42fc57;
                                color: #449e00;
                            }
                        }

                        &.red {
                            background: #ffdada;

                            .room-subject_category {
                                border: 1px solid #ff8383;
                                background: #ffa4a4;
                                color: #ae0000;
                            }
                        }

                        &.pink {
                            background: #f6daff;

                            .room-subject_category {
                                border: 1px solid #f867d6;
                                background: #f867d6;
                                color: #ffe2ef;
                            }
                        }

                        &.bluegreen {
                            background: #dafffe;

                            .room-subject_category {
                                border: 1px solid #2ac3ac;
                                background: #2ac3ac;
                                color: #efffe5;
                            }
                        }

                    }

                    .selected {
                        outline: 2px solid $f-theme-05;
                        outline-offset: -2px;
                        border-radius: 6px;
                    }
                }

            }
        }
    }

    &.rtv-container-week {

        .header-cell,
        .room-cell {
            flex: 1;
        }

        .room-row,
        .header-row {
            width: auto !important;
        }

        .header-cell>span {
            margin-left: 0px;
        }

        .time-cell {
            line-height: 20px;
            width: 150px;

            .week-day-subject {
                cursor: pointer;
                transition: all 0.1s ease;

                &:hover {
                    background-color: $f-aid-02;
                }
            }

            li.selected {
                border: 1px solid $f-theme-01;
                border-radius: 4px;
                background: $f-aid-02;
            }

            .rtv-week-day {
                text-align: center;
                border-radius: 10px;
                width: 20px;
                margin: 0 5px;
                font-size: 13px;

                &.active {
                    background-image: linear-gradient(135deg, $f-aid-10 0%, $f-theme-05 100%);
                    color: white;
                }

                &-item {
                    &:before {
                        content: "●";
                        margin-right: 3px;
                        top: -2px;
                        position: relative;
                    }
                }
            }
        }
    }
}

.reserve-detail-container {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    box-shadow: 0px 4px 12px 2px rgba(31, 35, 41, 0.1);
    border-radius: 16px;
    width: 368px;
    height: 436px;
    transition: all 0.12s ease;

    .detail-header {
        height: 185px;
        background-image: linear-gradient(116deg, $f-aid-10 0%, $f-theme-05 100%);
        border-radius: 16px 16px 0px 0px;

        &.gray {
            color: white;
            background-image: linear-gradient(116deg, #bcbebf 0, #909293 100%);
        }

        &.blue {
            color: white;
            background-image: linear-gradient(116deg, #0099FF 0%, #00AAFF 100%);
        }

        &.orange {
            color: white;
            background-image: linear-gradient(116deg, #ffc78c 0, #ffab58 100%);
        }

        &.mintgreen {
            color: white;
            background-image: linear-gradient(116deg, #72cc89 0, #00a804 100%);
        }

        &.red {
            color: white;
            background-image: linear-gradient(116deg, #ff9797 0, #ff3939 100%);
        }

        &.pink {
            color: white;
            background-image: linear-gradient(116deg, #f1b9fb 0, #d458ff 100%);
        }

        &.bluegreen {
            color: white;
            background-image: linear-gradient(116deg, #59ddc9 0, #1694c5 100%);
        }


        .detail-toolbar {
            height: 44px;
            justify-content: end;
            align-items: center;
            padding-right: 15px;
            display: flex;

            span.f-icon {
                font-size: 14px;
                cursor: pointer;
                width: 32px;
                height: 32px;
                text-align: center;
                line-height: 32px;
                border-radius: 6px;

                &:hover {
                    background: rgba(255, 255, 255, 0.2);
                }
            }
        }

        .detail-title {
            flex: 1;
            padding: 0 24px;
            overflow: hidden;

            .detail-place {
                font-size: 16px;
            }

            div.title-content {
                margin: 6px 0 16px 0;
                font-size: 20px;
                line-height: 28px;

                span.detail-badge {
                    height: 18px;

                    border-radius: 4px;
                    display: inline-block;
                    font-size: 12px;
                    text-align: center;
                    line-height: 18px;
                    padding: 0 5px;

                    &.gray {
                        border: 1px solid #cccccc;
                        background: #F2F3F5;
                        color: #878d99;
                    }

                    &.blue {
                        border: 1px solid #99bbff;
                        background: #99bbff;
                        color: #ffffff;
                    }

                    &.pink {
                        border: 1px solid #f867d6;
                        background: #f867d6;
                        color: #ffe2ef;
                    }

                    &.red {
                        border: 1px solid #ff8383;
                        background: #ffa4a4;
                        color: #ae0000;
                    }

                    &.mintgreen {
                        border: 1px solid #42fc57;
                        background: #42fc57;
                        color: #449e00;
                    }

                    &.orange {
                        border: 1px solid #ff772e;
                        background: #ff772e;
                        color: #fff5ea;
                    }

                    &.bluegreen {
                        border: 1px solid #48fce0;
                        background: #5efee6;
                        color: #00b8bd;
                    }
                }
            }

            .detail-timer {
                height: 30px;
                font-size: 14px;
                line-height: 30px;
            }
        }

    }

    .detail-info-content {
        flex: 1;
        padding: 2px;
        padding-bottom: 10px;
        color: #666;
        border-radius: 0 0 16px 16px;

        ul {
            list-style: none;
            margin: 0;
            padding: 16px;
            font-size: 14px;


            li {
                line-height: 28px;
                display: flex;
                flex-direction: row;

                span.detail-subtitle {
                    width: 70px;
                    display: inline-block;
                }

                span.detail-content {
                    flex: 1;
                }
            }
        }
    }
}


.win11Scroll {
    overflow: overlay;
    scroll-behavior: smooth;
}

.win11Scroll::-webkit-scrollbar {
    --scroll: rgb(255 255 255 / 80%);
    --scrollbar-top-btn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.102 16.981c-1.074 0-1.648-1.265-.941-2.073l5.522-6.311a1.75 1.75 0 0 1 2.634 0l5.522 6.311c.707.808.133 2.073-.941 2.073H6.102z' fill='rgb(0 0 0 / 50%)'/%3E%3C/svg%3E");
    --scrollbar-right-btn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 17.898c0 1.074 1.265 1.648 2.073.941l6.311-5.522a1.75 1.75 0 0 0 0-2.634l-6.311-5.522C10.265 4.454 9 5.028 9 6.102v11.796z' fill='rgb(0 0 0 / 50%)'/%3E%3C/svg%3E");
    --scrollbar-bottom-btn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.102 8c-1.074 0-1.648 1.265-.941 2.073l5.522 6.311a1.75 1.75 0 0 0 2.634 0l5.522-6.311c.707-.808.133-2.073-.941-2.073H6.102z' fill='rgb(0 0 0 / 50%)'/%3E%3C/svg%3E");
    --scrollbar-left-btn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 17.898c0 1.074-1.265 1.648-2.073.941l-6.311-5.522a1.75 1.75 0 0 1 0-2.634l6.311-5.522c.808-.707 2.073-.133 2.073.941v11.796z' fill='rgb(0 0 0 / 50%)'/%3E%3C/svg%3E");
    width: 14px;
    height: 14px;
    border-radius: 7px
}

.win11Scroll::-webkit-scrollbar:vertical:hover {
    background: var(--scrollbar-bottom-btn) 0% calc(100% - 3px)/contain no-repeat, var(--scrollbar-top-btn) 0% calc(0% + 3px)/contain no-repeat, var(--scroll)
}

.win11Scroll::-webkit-scrollbar:horizontal:hover {
    background: var(--scrollbar-right-btn) calc(100% - 3px) 0%/contain no-repeat, var(--scrollbar-left-btn) calc(0% + 3px) 0%/contain no-repeat, var(--scroll)
}

.win11Scroll.show::-webkit-scrollbar:vertical {
    background: var(--scrollbar-bottom-btn) 0% calc(100% - 3px)/contain no-repeat, var(--scrollbar-top-btn) 0% calc(0% + 3px)/contain no-repeat, var(--scroll)
}

.win11Scroll.show::-webkit-scrollbar:horizontal {
    background: var(--scrollbar-right-btn) calc(100% - 3px) 0%/contain no-repeat, var(--scrollbar-left-btn) calc(0% + 3px) 0%/contain no-repeat, var(--scroll)
}



.win11Scroll::-webkit-scrollbar-thumb {
    display: none;
    background: rgba(0, 0, 0, .5);
    background-clip: padding-box;
    border: 6px solid transparent;
    border-radius: 14px
}

.win11Scroll::-webkit-scrollbar-thumb:hover {
    border: 4px solid transparent
}

.win11Scroll::-webkit-scrollbar-button:single-button {
    height: 14px
}

.win11Scroll:hover::-webkit-scrollbar-thumb {
    display: block
}

.win11Scroll.show::-webkit-scrollbar-thumb {
    display: block
}

.win11Scroll::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0)
}

.win11Scroll::-webkit-scrollbar-track {
    background-color: transparent;
}

.win11Scroll.nobtn {
    &::-webkit-scrollbar:vertical {
        background: none;
    }

    &::-webkit-scrollbar:horizontal {
        background: none;
    }

    &::-webkit-scrollbar-button:single-button {
        height: 0px;
        width: 0px;
    }
}